<template>
<!--    <div :id="id" class="qrcode qrCodeWidth" @click="click" title="点击可下载"></div>-->
    <div id="qrcode" class="qrcode qrCodeWidth" ref="qrcode" @click="click" title="点击可下载"></div>
</template>
<script>
    import QRCode from 'qrcodejs2'
    export default {
        name: 'EdQrCode',
        props: {
            url: {
                type: String,
                default: ''
            },
            id: {
                type: [String,Number]
            },
            name:{
                type: String,
                default: ''
            }
        },
        data() {
            return {
                code:""
            }
        },
        watch:{
            id(){
                this.qrcode()
            }
        },
        methods: {
            qrcode() {
                this.$nextTick(() => {
                    // document.getElementById(this.id).innerHTML = '';
                    // console.log("document",this.id)
                    // this.code = new QRCode(this.id, {
                    //     text: this.url,
                    //     width: 110,
                    //     height: 110
                    // })
                    if(this.url){
                        this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
                        this.code = new QRCode(this.$refs.qrcode, {
                            text: this.url, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                            width: 200,
                            height: 200,
                        })
                    }



                })
            },
            getBlob(base64) {
                let mimeString = base64.split(',')[0].split(':')[1].split(';')[0]; // mime类型
                let byteString = atob(base64.split(',')[1]); //base64 解码
                let arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
                let intArray = new Uint8Array(arrayBuffer); //创建视图
                 for (let i = 0; i < byteString.length; i += 1) {
                       intArray[i] = byteString.charCodeAt(i);
                    }
                    return new Blob([intArray], {
                          type: mimeString
                 });
            },
            click(){
                //这里如果需要在页面上展示的话，就将div节点给添加到dom树上去；node.appendChild(div)
                let canvas = this.code._el.querySelector("canvas");//获取生成二维码中的canvas，并将canvas转换成base64
                let base64Text = canvas.toDataURL("image/png");
                let blob = this.getBlob(base64Text); //将base64转换成blob对象



                //接下来就是下载了，主要的思路就是通过URL.createURL()方法把blob对象转换成url，然后绑定到a标签中的href上，通过a标签的下载属性来进行下载。
                if (navigator.msSaveBlob) {
                    // IE的Blob保存方法
                    navigator.msSaveBlob(blob, this.name);
                } else {
                    let link = document.createElement('a');
                    let href = window.URL.createObjectURL(blob);
                    link.href = href;
                    link.download = this.name;  //a标签的下载属性
                    document.body.appendChild(link); // firefox需要把a添加到dom才能正确执行click
                    link.click();
                    // 延时保证下载成功执行，否则可能下载未找到文件的问题
                    setTimeout(function () {
                        window.URL.revokeObjectURL(href); // 释放Url对象
                        document.body.removeChild(link);
                    }, 100);
                }
            }
        },
        mounted() {
            this.qrcode()
        }
    }
</script>
<style lang="scss">
    .qrCodeWidth {
        display: flex;
        /*align-items: center;*/
        /*justify-content: center;*/
        img{
            width: 50px !important;
            height: 50px !important;
        }
    }
</style>